<template>
  <section class="rh_switch"
           @click="change">
    <p class="btn"
       v-show="!switchFlag"></p>
    <p class="btn"
       v-show="switchFlag">√</p>
  </section>
</template>

<script>
export default {
  data () {
    return {
      switchFlag: false
    }
  },
  methods: {
    change () {
      this.switchFlag = !this.switchFlag;
      this.$emit('change', this.switchFlag);
    }
  }
}
</script>

<style lang="less" scoped>
.rh_switch {
  .btn {
    width: 18px;
    height: 18px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    border: 1px solid #f30;
    color: #fff;
    background-color: #f30;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 50%;
  }
}
</style>